'use client';

import React, {useState, useEffect, ReactNode} from 'react';
import {motion, AnimatePresence} from 'framer-motion';
import {
    PlusIcon,
    RectangleStackIcon,
    CalendarDaysIcon,
    FaceSmileIcon,
    CurrencyDollarIcon,
    CogIcon,
    Bars3Icon,
    XMarkIcon,
} from '@heroicons/react/24/outline';
import {
    PlusIcon as PlusIconSolid,
    RectangleStackIcon as RectangleStackIconSolid,
    CalendarDaysIcon as CalendarDaysIconSolid,
    FaceSmileIcon as FaceSmileIconSolid,
    CurrencyDollarIcon as CurrencyDollarIconSolid,
    CogIcon as CogIconSolid,
} from '@heroicons/react/24/solid';
import {useAppStore} from '@/store';
import AddEntryForm from './AddEntryForm';
import EntryBoard from './EntryBoard';
import MoodBoard from './MoodBoard';
import TimeBoard from './TimeBoard';
import Settings from './Settings';
import WealthDashboard from './WealthDashboard';

interface LayoutProps {
    children?: ReactNode;
}

const Layout: React.FC<LayoutProps> = ({children}) => {
    const [activeTab, setActiveTab] = useState('add');
    const [isMobile, setIsMobile] = useState(false);
    const [isMenuOpen, setIsMenuOpen] = useState(false);

    const {currentCoins} = useAppStore();

    // 导航标签页配置
    const navigationTabs = [
        {id: 'add', label: '添加', Icon: PlusIcon, ActiveIcon: PlusIconSolid},
        {id: 'activities', label: '事项', Icon: RectangleStackIcon, ActiveIcon: RectangleStackIconSolid},
        {id: 'calendar', label: '日历', Icon: CalendarDaysIcon, ActiveIcon: CalendarDaysIconSolid},
        {id: 'mood', label: '情绪', Icon: FaceSmileIcon, ActiveIcon: FaceSmileIconSolid},
        {id: 'wealth', label: '财富', Icon: CurrencyDollarIcon, ActiveIcon: CurrencyDollarIconSolid},
        {id: 'settings', label: '设置', Icon: CogIcon, ActiveIcon: CogIconSolid},
    ];

    useEffect(() => {
        const checkScreenSize = () => {
            setIsMobile(window.innerWidth < 1024);
        };

        checkScreenSize();
        window.addEventListener('resize', checkScreenSize);

        return () => window.removeEventListener('resize', checkScreenSize);
    }, []);

    // 关闭移动端菜单
    const closeMobileMenu = () => {
        setIsMenuOpen(false);
    };

    // 切换标签页
    const handleTabChange = (tabId: string) => {
        setActiveTab(tabId);
        if (isMobile) {
            closeMobileMenu();
        }
    };

    // 根据activeTab渲染对应的组件
    const renderContent = () => {
        switch (activeTab) {
            case 'add':
                return <AddEntryForm/>;
            case 'activities':
                return <EntryBoard/>;
            case 'calendar':
                return <TimeBoard/>;
            case 'mood':
                return <React.Suspense fallback={<div>加载中...</div>}><MoodBoard/></React.Suspense>;
            case 'wealth':
                return <WealthDashboard/>;
            case 'settings':
                return <Settings/>;
            default:
                return children || <AddEntryForm/>;
        }
    };

    return (
        <div className="flex h-screen bg-gray-50 overflow-hidden">
            {/* 侧边栏 */}
            <div className={`
        ${isMobile
                ? `fixed inset-y-0 left-0 z-50 w-72 transform transition-transform duration-300 ease-in-out ${
                    isMenuOpen ? 'translate-x-0' : '-translate-x-full'
                }`
                : 'w-72 flex-shrink-0'
            }
        bg-white border-r border-gray-200 flex flex-col
      `}>
                {/* 顶部标题和金币 */}
                <div className="p-6 border-b border-gray-200">
                    <div className="flex items-center justify-between">
                        <div>
                            <h1 className="text-xl font-bold text-gray-900">注意力货币</h1>
                            <p className="text-sm text-gray-600 mt-1">专注创造价值</p>
                        </div>
                        {isMobile && (
                            <button
                                onClick={closeMobileMenu}
                                className="p-2 rounded-lg hover:bg-gray-100"
                            >
                                <XMarkIcon className="w-5 h-5"/>
                            </button>
                        )}
                    </div>

                    {/* 金币显示 */}
                    <motion.div
                        initial={{scale: 0.95, opacity: 0}}
                        animate={{scale: 1, opacity: 1}}
                        className="mt-4 p-3 bg-gradient-to-r from-yellow-50 to-orange-50 rounded-xl border border-yellow-200"
                    >
                        <div className="flex items-center justify-between">
                            <div className="flex items-center gap-2">
                                <span className="text-xl">🪙</span>
                                <span className="text-sm text-gray-600">当前金币</span>
                            </div>
                            <span className="text-lg font-bold text-orange-600">{currentCoins}</span>
                        </div>
                    </motion.div>
                </div>

                {/* 导航菜单 */}
                <nav className="p-4">
                    <ul className="space-y-2">
                        {navigationTabs.map((tab) => {
                            const isActive = activeTab === tab.id;
                            const IconComponent = isActive ? tab.ActiveIcon : tab.Icon;

                            return (
                                <motion.li
                                    key={tab.id}
                                    whileHover={{scale: 1.02}}
                                    whileTap={{scale: 0.98}}
                                >
                                    <button
                                        onClick={() => handleTabChange(tab.id)}
                                        className={`
                      w-full flex items-center gap-3 px-4 py-3 rounded-xl text-left transition-all
                      ${isActive
                                            ? 'bg-blue-50 text-blue-700 font-medium border border-blue-200'
                                            : 'text-gray-600 hover:bg-gray-50 hover:text-gray-700'
                                        }
                    `}
                                    >
                                        <IconComponent className="w-5 h-5"/>
                                        <span>{tab.label}</span>
                                    </button>
                                </motion.li>
                            );
                        })}
                    </ul>
                </nav>
            </div>

            {/* 主内容区域 */}
            <div className="flex-1 flex flex-col overflow-hidden">
                {/* 移动端顶部栏 */}
                {isMobile && (
                    <div className="lg:hidden bg-white border-b border-gray-200 p-4">
                        <div className="flex items-center justify-between">
                            <button
                                onClick={() => setIsMenuOpen(true)}
                                className="p-2 rounded-lg hover:bg-gray-100"
                            >
                                <Bars3Icon className="w-5 h-5"/>
                            </button>
                            <h1 className="font-semibold text-gray-900">注意力货币系统</h1>
                            <div className="w-9"/>
                            {/* 占位符保持平衡 */}
                        </div>
                    </div>
                )}

                {/* 内容区域 */}
                <div className="flex-1 overflow-auto">
                    <div className="p-6">
                        <AnimatePresence mode="wait">
                            <motion.div
                                key={activeTab}
                                initial={{opacity: 0, y: 20}}
                                animate={{opacity: 1, y: 0}}
                                exit={{opacity: 0, y: -20}}
                                transition={{duration: 0.2}}
                                className="h-full"
                            >
                                {renderContent()}
                            </motion.div>
                        </AnimatePresence>
                    </div>
                </div>
            </div>

            {/* 移动端遮罩层 */}
            {isMobile && isMenuOpen && (
                <motion.div
                    initial={{opacity: 0}}
                    animate={{opacity: 1}}
                    exit={{opacity: 0}}
                    onClick={closeMobileMenu}
                    className="fixed inset-0 bg-black bg-opacity-50 z-40"
                />
            )}
        </div>
    );
};

export default Layout;